import React, {Component} from 'react';
import {
  Row,
  Col,
  Timeline
} from 'antd';
import moment from 'moment'
import { afterSaleStatusEnum } from '../constant/enum.js';
import classNames from 'classnames'
const TimelineItem = Timeline.Item;

export default class PayDetail extends Component {
    static defaultProps = {
        totalPrice:0,
        //applyRefund:0,
        //actualeRefund:0,
    }

    constructor(props) {
        super(props);
        this.state = {
            showMore:false
        }
    }

    render() {
        const { totalPrice, order, logs } = this.props;
        const { showMore } = this.state;
        let payInfo = [];
        /**
         * 已退款和退款完成，才显示实际退款金额
         * 其余都不展示实际退款，因为没完成整个流程！
         */
        if(order.get('state') === afterSaleStatusEnum.REFUND.value || order.get('state') === afterSaleStatusEnum.FINISHED.value){
            payInfo.push(
                 <Row className="pushb t-grayer" key="apply">
                    <Col span={12}>申请退款金额：</Col>
                    <Col span={12}><div className="t-right">&yen;{(order.get('applyRefund') || 0).toFixed(2)}</div></Col>
                </Row>,
                <Row className="pushb font-16" key="actural">
                    <Col span={12}>实际退款金额：</Col>
                    <Col span={12}><div className="t-right t-red">&yen;{order.get('actualeRfund') != undefined ? order.get('actualeRfund').toFixed(2) : '0.00'}</div></Col>
                </Row>
            )
        }else{
            //卖家取消，或者审核不通过，显示申请金额
            let txtLabel = (order.get('state') === afterSaleStatusEnum.CANCEL.value || order.get('state') === afterSaleStatusEnum.UNAUDITED.value) ?
                                "申请退款金额" : "退款金额"
            payInfo.push(
                <Row className="pushb font-16" key="acturalprice">
                    <Col span={12}>{txtLabel}：</Col>
                    <Col span={12}><div className="t-right t-red">&yen;{(order.get('applyRefund') || 0).toFixed(2)}</div></Col>
                </Row>
            )
        }
        //操作日志默认显示前2个
        let logOps = logs.filter((log, index) => showMore || index < 2).map((log, index)=>{
             let classState = classNames({
                't-primary': index === 0
            });
            return (
                <TimelineItem key={index} color={index == 0 ? 'blue' : '#ddd'}>
                    <p className={classState}>
                        <span>{moment(log.get('time')).format('YYYY-MM-DD HH:mm:ss')}</span>
                        <span>【{log.get("optName")}】</span>
                        <span>{this.computeLog(log.get('event'))}&nbsp;</span>
                        <span>{log.get('remark')}</span>
                    </p>
                </TimelineItem>
            )
        }).toArray();
        //幽灵节点
        let timelinePending = logs.count() > 2 ? (
            <a href="javascript:;" onClick={this.toggle}>{showMore ? "收起" : "查看更多"}</a>
        ) : false;
        return (
            <Row className="order-pay-detail">
                <Col span={10} className="bdr t-grayer">
                    <Timeline pending={timelinePending}>
                        {logOps}
                    </Timeline>
                </Col>
                <Col span={9} offset={5}>
                    <Row className="pushb t-grayer" key="total">
                        <Col span={12}>退货商品总额：</Col>
                        <Col span={12}><div className="t-right">&yen;{totalPrice.toFixed(2)}</div></Col>
                    </Row>
                   {payInfo}
                </Col>
            </Row>
        )
    }
    toggle = () => {
        this.setState((prevState)=>{
            return {
                showMore:!prevState.showMore
            }
        });
    }
    /**
     * event，是日志记录
     */
    computeLog = (event) => {
        switch(Number(event)){
            case 1:
                return '申请售后';
            case 2:
                return "审核通过";
            case 3:
                return "审核不通过";
            case 4:
                return "卖家收到退货";
            case 5:
                return "卖家已退款"
            case 6:
                return "退款完成";
            case 7:
                return "取消申请"
            case 8:
                return "取消审核"
        }
    }
}